<template>
  <div>
    <div class="header-search-box shadow">
      <myForm
        :searchBox="{ span: 8 }"
        :span="8"
        :ruleForm="searchForm.data"
        :formData="searchForm.config"
        :optionData="searchForm.optionData"
        :disabledProp="searchForm.disabledProp"
        @reset="searchHandler"
        @submitForm="searchHandler"
      >
      </myForm>
    </div>
    <div class="scene-main">
      <sec-table
        :loading="searchTable.loading"
        :tableData="searchTable.rows"
        :tableCol="searchTable.cols"
        ref="secTabel"
      >
        <template v-slot:sceneTypes="{ data }">
          <el-tag v-for="(item, index) in data.row.sceneTypes" :key="index" style="margin: 4px">
            {{ item.name }}
          </el-tag>
        </template>
        <template v-slot:scenes="{ data }">
          <el-tag v-for="(item, index) in data.row.scenes" :key="index" style="margin: 4px">
            {{ item.name }}
          </el-tag>
        </template>
      </sec-table>

      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="page"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import myForm from "components/formValidate/myForm";
import secTable from "components/table/comTable";
import { paginationMixin } from "common/js/mixin";
import { relationQueryApi, associateListApi } from "api/dataApi";
export default {
  name: "linkSearch",
  props: {},
  mixins: [paginationMixin],
  components: {
    myForm,
    secTable,
  },
  data() {
    return {
      searchForm: {
        optionData: {
          link: [],
        },
        data: {
          link: [],
          domain: "",
        },
        disabledProp: {
          domain: true,
        },
        config: [
          {
            type: "cascader",
            label: "关联查询",
            prop: "link",
            props: { multiple: true, value: "id", label: "name", children: "list" },
            collapseTags: true,
            clearable: true,
            filterable: true,
          },
          { type: "text", label: "域名", prop: "domain" },
        ],
        rules: [],
      },
      searchTable: {
        loading: false,
        cols: [
          { label: "场景类型", prop: "sceneTypes", type: "slot", align: "left" },
          { label: "场景名称", prop: "scenes", type: "slot", align: "left" },
          { label: "指标名称", prop: "templateItemName" },
          { label: "指标要求", prop: "templateItemContent" },
          { label: "关联资产", prop: "domain" },
          {
            label: "审计结果",
            prop: "status",
            formatter: (row, column, cellValue, index) => {
              return this.utils.getDicLabel("status", cellValue);
            },
          },
          { label: "现状描述", prop: "remark" },
          {
            label: "操作",
            prop: "operation",
            width: 100,
            children: [
              {
                titleFunc: ({ row, column, $index }) => {
                  return row.anquanId ? "工单详情" : "-";
                },
                click: ({ row, column, $index }) => {
                  if (!row.anquanId) return;
                  let domain = "http://anquan.didichuxing.com"; //测试的地址是http://anquan-test.didichuxing.com
                  window.open(`${domain}/project/portals/pages/hole-detail.html?id=${row.anquanId}`);
                },
              },
            ],
          },
        ],
        rows: [],
      },
    };
  },
  computed: {},
  mounted() {
    this.getRelationQuery();
    this.getAssociateList();
  },
  methods: {
    //获取列表
    getAssociateList() {
      let loading = this.openLoading();
      associateListApi({
        pageNum: this.page,
        pageSize: this.pageSize,
        domain: this.searchForm.data.domain,
        list: this.getChangeList(),
      }).then((res) => {
        loading.close();
        this.totalSize = res.count;
        this.searchTable.rows = res.data;
      });
    },
    //格式化关联查询数据 传递给后台
    getChangeList() {
      let list = this.searchForm.data.link;
      return list.map((item) => {
        return { sceneTypeId: item[0], sceneId: item[1], templateId: item[2] };
      });
    },
    //关联查询数据
    getRelationQuery() {
      relationQueryApi().then((res) => {
        this.searchForm.optionData.link = res.data;
      });
    },
    searchHandler() {
      this.page = 1;
      this.getAssociateList();
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getAssociateList();
    },
    currentChange(val) {
      this.page = val;
      this.getAssociateList();
    },
  },
  watch: {
    searchForm: {
      deep: true,
      handler(newVal) {
        if (newVal.data.link.length > 0) {
          this.searchForm.disabledProp.domain = false;
        } else {
          this.searchForm.disabledProp.domain = true;
          this.searchForm.data.domain = "";
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
